<!-- 商品分类页 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品分类页</title>
    <link rel="stylesheet" href="./stylesheets/header_new.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .classify_open {
            width: 100%;
            height: 600px;
            border: 1px solid #ccc;
            display: flex;
            border-radius: 5px;
        }
        
        .classify_left {
            flex: 1;
            width: 100%;
            background-color: #FFF;
        }
        
        .classify_middle {
            flex: 1;
            width: 100%;
            background-color: #F6F5F3;
        }
        
        .classify_right {
            flex: 2;
            width: 100%;
            background-color: #F6F5F3;
            overflow: hidden;
        }
        
        .classify_right img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.6s;
        }
        
        .classify_right img:hover {
            transform: scale(1.1);
        }
        
        .classify_middle .classify_left_man {
            margin-top: 80px;
        }
        
        .classify_left_man {
            list-style: none;
            display: block;
            width: 120px;
            margin: 50px auto;
        }
        
        .classify_left_man li {
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        
        .classify_left_man li:hover {
            cursor: pointer;
        }
        
        .classify_left_man li::after {
            content: "";
            display: block;
            transition: all 300ms ease-in-out 0s;
            cursor: pointer;
            border-top: 1px solid #000;
            width: 0;
        }
        
        .classify_left_man li:hover::after {
            width: 100%;
        }
    </style>
</head>

<body>
    <header>
        <div class="type_page">
            <div class="header_logo">
                <a href="#"><img src="images/small_log.jpg" alt="YiJi_logo"></a>
            </div>
            <div class="header_left_nav">
                <ul>
                    <li><a href="#">男士</a></li>
                    <li><a href="#">女士</a></li>
                    <li><a href="#">社区</a></li>
                    <li><a href="#">活动</a></li>
                </ul>
            </div>
            <div class="header_right_nav">
                <input type="text" class="input_search" placeholder="搜索">
                <ul>
                    <li>
                        <a href="#"><img src="images/icon_fans.png" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/icon_buy.png" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/icon_user_manage.png" alt=""></a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <div class='container'>
        <div class="classify_open">
            <div class="classify_left">
                <ul class="classify_left_man">
                    <li>外套&针织衫</li>
                    <li>衬衫</li>
                    <li>卫衣</li>
                    <li>长裤</li>
                    <li>短裤</li>
                    <li>外套&针织衫</li>
                    <li>衬衫</li>
                    <li>卫衣</li>
                    <li>长裤</li>
                    <li>短裤</li>
                </ul>
            </div>
            <div class="classify_middle">
                <ul class="classify_left_man">
                    <li>外套&针织衫</li>
                    <li>衬衫</li>
                    <li>卫衣</li>
                    <li>长裤</li>
                    <li>短裤</li>
                    <li>外套&针织衫</li>
                    <li>衬衫</li>
                </ul>
            </div>
            <div class="classify_right">
                <img src="https://www.louisvuitton.cn/images/is/image/lv/1/VE_DI2_L/%E8%B7%AF%E6%98%93%E5%A8%81%E7%99%BB--Men_MM_RTW_Staples_april_DI2.jpg?wid=944&hei=1064" alt="">
            </div>
        </div>
    </div>

</body>

</html>